<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户登录</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
        <style>
            .center{
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%,-50%); 
         }
        </style>
    </head>
    <body class='center'>
        <div id='app'>
            <el-card style='width: 400px;'>
                <div slot="header" style="text-align: center; font-size: large;">
                    <span>风控决策引擎</span>
                </div>
                <el-form ref='loginform' :model='login' label-width="auto">
                    <el-form-item label="登录账号:" prop='usercode' :rules="[{
                                required: true,
                                message: '请输入登录账号',
                                trigger: 'blur'
                            }
                        ]">
                        <el-input v-model="login.usercode" placeholder="请输入登录账号"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码:" prop='userpwd' :rules="[{
                                required: true,
                                message: '请输入登录密码',
                                trigger: 'blur'
                            }
                        ]">
                        <el-input type="password" v-model="login.userpwd" placeholder="请输入登录密码" @keyup.enter.native="handleLogin"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-checkbox type="checkbox" v-model="login.rememberMe" label="记住我"></el-checkbox>

                        <a style="float: right; padding: 3px 0px;font-size: smaller;" href="javascript:alert('建设中...')">
                            帮助文档
                            <!-- TODO -->
                        </a>
                    </el-form-item>

                    <el-form-item label="">
                        <el-alert v-show='promptmsg' :title="promptmsg" type="error">
                        </el-alert>
                        <el-button style='margin-left: 40px; width: 120px;' type="primary" @click='handleLogin'> 登 录
                        </el-button>
                    </el-form-item>
            </el-card>
        </div>

        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            import * as $rest from '/lib/hc-rest-service.js'
            window.vm = new Vue({
                el: '#app',
                data: {
                    login:{
                        usercode: '',
                        userpwd: '',
                        rememberMe: true,
                    },
                    promptmsg:$util.getUrlArgOrDefault('redirect')?'账号未登录，请登录后访问':'',
                },
                methods: {
                    handleLogin: function() {
                        let self = this;
                        this.$refs['loginform'].validate((valid) => {
                            if (valid) {
                                doLogin();
                            } else {
                                self.promptmsg = '验证失败，请填写正确的登录信息。'
                                return false;
                            }
                        });
                        
                        function doLogin(){
                            $rest.post("/admin/login",self.login)
                                .then(function(res) {
                                    if(res.data.error)
                                    {
                                        console.error('error to login ', res.data.data)
                                        self.promptmsg = res.data.data;
                                        return;
                                    }
                                    
                                    let defaultRedirect = window.top === window ? '/index.htm' : '/welcome.htm';
                                    let redirect = $util.getUrlArgOrDefault('redirect',defaultRedirect);
                                    $util.forward(redirect)
                                    
                                }).catch(function(ex) {
                                    console.error('error to login. ', ex)
                                    self.promptmsg = ex;
                                });
                         };
                    },
                },
            });
            
        </script>
    </body>
</html>
